
<title>对话</title>

<link rel="stylesheet" href="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/basic/modals.css">

<link rel="stylesheet" href="/statics/public/vendor/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/advanced/lightbox.css">

<div class="page animation-fade page-index">
    <div class="page-content">

        <div class="panel" style="height: 100%;">

            <div class="panel-body">
                <div class="col-md-12 form-group" style="margin-bottom: 10px">
                    <button type="button" href="create/0/" data-toggle="modal" data-target="#exampleTabs" class="btn btn-success pull-left" id="add_button">
                        <i class="icon fa-plus" aria-hidden="true"></i> 添加
                    </button>
                </div>

                <table class="table table-bordered table-hover dataTable table-striped width-full text-nowrap" id="dataTable">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>销售</th>
                        <th>部门</th>
                        <th>关键词</th>
                        <th>创建时间</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

{# 模态对话框 #}
<div class="modal fade" id="modal" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog" tabindex="-1" style="display: none; z-index: 1050">
    <div class="modal-dialog modal-top">
        <div class="modal-content">
        </div>
    </div>
</div>

{# 模态对话框 #}
<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog" tabindex="-1" style="display: none; z-index: 1051">
    <div class="modal-dialog modal-top" style="width: 700px;">
        <div class="modal-content" style="margin-top: -50px;">
        </div>
    </div>
</div>

<div class="modal fade" id="exampleTabs" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog" style="width: 700px;">
        <div class="modal-content">

        </div>
    </div>
</div>


<div class="modal fade" id="exampleTabs1" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog" style="width: 1000px;">
        <div class="modal-content">

        </div>
    </div>
</div>

{# 右侧显示用户信息模态对话框 #}
<div class="modal fade" id="examplePositionSidebar" aria-hidden="true" aria-labelledby="examplePositionSidebar" role="dialog" tabindex="-1" style="display: none; z-index: 1041;">
    <div class="modal-dialog modal-sidebar modal-sm" style="justify-content: flex-start;">
        <div class="modal-content">

        </div>
    </div>
</div>


<script src="/statics/public/vendor/magnific-popup/jquery.magnific-popup.min.js" data-name="popup"></script>
<script src="/statics/public/js/examples/components/advanced/lightbox.js" data-deps="popup"></script>

<script src="/statics/public/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.min.js"></script>
<script src="/statics/public/js/examples/tables/data-tables/api/row-details.js"></script>

<script>

    (function ($) {

        var table = $('#dataTable').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "每页显示 _MENU_ 条",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "第 _START_ 至 _END_ 项，共 _TOTAL_ 项",
                "sInfoEmpty": "第 0 至 0 项，共 0 项",
                "sInfoFiltered": "",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "processing": true,
            "destroy": true,
            "serverSide": true,  // 服务器模式
            "ajax": "?type=ajax_json", // ajax 取数据
            "aaSorting": [
                [2, "asc"]
            ], // 默认排序
            "columns": [
                {
                    "data": "number",
                    "orderable": false,  // 禁止排序
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "user"
                },
                {
                    "data": "department_name"
                },
                {
                    "data": "keyworld"
                },
                {
                    "data": "create_date"
                },

                {
                    "data": "remark",
                    "orderable": false,  // 禁止排序
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "settings",
                    "orderable": false,  // 禁止排序
                    "searchable": false     // 不可搜索
                }
            ]
        });

    })(jQuery)

</script>
